<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>一个重要的内置关系</title>
</head>
<body>
    <div id="root1">
        <school></school>
    </div>
<!-- 一个重要的内置关系  VueComponent.prototype.__proto__===Vue.prototype 
  让组件的实例对象(vc)可以访问到Vue原型上的属性和方法；
-->
    <script>
Vue.prototype.x=99;

const school=Vue.extend({
        template:`
        <div>
        <h2>{{schoolName}}</h2>
        <h2>{{address}}</h2>
        <button @click="test">点我</button>
        <div>
        `,
         data(){
            return{
                schoolName:'尚硅谷',
                address:'北京昌平'
            }
         },
         methods:{
            test(){
                alert(this.x);
            }
         }
       })

     const vm=new Vue({
       el: '#root1',
       data: {
        
       },
       methods:{
       
       },
       components:{
        school
       }
       })
    
       console.log(school.prototype.__proto__===Vue.prototype);


        function Psrson(){

        };

        function Dog(){

        };

        const p=new Psrson();
        const d=new Dog();

        console.log(p);
        console.log(d);
    </script>
</body>
</html>